{% extends 'base.html'%}
{%load i18n%}
{% block title %}{{ title }}{% endblock %}
{% load staticfiles %}
{% block css %}
<link rel="stylesheet" href="{% static 'plugins/select2/dist/css/select2.min.css' %}">
<link rel="stylesheet" href="{% static 'plugins/select2-bootstrap-theme/dist/select2-bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'plugins/jstree/themes/proton/style.min.css' %}"/>
{% endblock %}
{% block content %}
{% load crispy_forms_tags %}
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <!-- BEGIN EXAMPLE TABLE PORTLET-->
            <div class="box box-success">
                <div class="box-header with-border">
                    <div class="caption">
                        <button class="btn btn-primary" onclick="window.location.href = '{% url 'permissionlist' %}'">
                            {%trans 'Return Permission List' %}
                        </button>
                    </div>

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                        <div class="btn-group">
                            <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-wrench"></i></button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">{%trans 'Action' %}</a></li>
                                <li><a href="#">{%trans 'Another action' %}</a></li>
                                <li><a href="#">{%trans 'Something else here' %}</a></li>
                                <li class="divider"></li>
                                <li><a href="#">{%trans 'Separated link' %}</a></li>
                            </ul>
                        </div>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
                        </button>
                    </div>
                </div>

                <form id="id-m-form" action="" method="post" class="form form-horizontal " role="form">
                    <div class="box-body">
                        {% if form.helper %}
                            {% crispy form form.helper %}
                        {% else %}
                            {% crispy form %}
                        {% endif %}
                        <div class="form-group">
                            <div id="div_id_permissions_tree" class="form-group"><label for="div_id_permissions_tree"
                                                                            class="control-label col-md-2 requiredField">
                                {%trans 'Permissions' %}<span class="asteriskField">*</span> </label>
                                <div class="controls col-md-8">

                                 </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-offset-2 col-xs-10">
                                <button type="submit" class="btn btn-primary">{%trans 'submit' %}</button>
                                <button type="button" class="btn btn-default goback" onclick="history.back()">{%trans 'cancel' %}</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <!-- END EXAMPLE TABLE PORTLET-->
        </div>

    </div>
</section>
{% endblock %}
{% block js %}
<script type="text/javascript" src="{% static 'plugins/select2/dist/js/select2.full.min.js' %}"></script>
<script src="{% static 'plugins/jstree/jstree.js' %}"></script>
<script type="application/javascript">
    $('#id_groups,#id_user').select2({
        theme: "bootstrap"
    });
    //hide original permission tree
    $(".form-group[id='div_id_permissions']").hide()

    //generate new permission tree
    $("#div_id_permissions_tree >.col-md-8").jstree({
        core: {
            themes: {
                name: 'proton',
                // responsive: true
            },
            responsive: true,
            check_callback: 0,
            data: {{permission_tree_list|safe}},
        },
        types: {
            default: {icon: "fa fa-folder icon-state-warning icon-lg"},
            file: {icon: "fa fa-file icon-state-warning icon-lg"}
        },
        plugins: ["types","checkbox","state"],
        checkbox: {
            "tie_selection": false,
            "whole_node": false
        },
    }).on("check_node.jstree", function (e, data) {
            //update form data when select tree node
            if (data.node.original.level == "three"){
                $("input[value='"+data.node.original.id+"']").prop("checked",true)
            }else if (data.node.original.level == "two"){
                $(data.node.children).each(function (index,item) {
                    $("input[value='"+item+"']").prop("checked",true)
                })
            }else{
                $(data.node.children_d).each(function (index,item) {
                    $("input[value='"+item+"']").prop("checked",true)
                })
            }
        }).on("uncheck_node.jstree", function (e, data) {
        if (data.node.original.level == "three"){
            $("input[value='"+data.node.original.id+"']").prop("checked",false)
        }else if (data.node.original.level == "two"){
            $(data.node.children).each(function (index,item) {
                $("input[value='"+item+"']").prop("checked",false)
            })
        }else{
            $(data.node.children_d).each(function (index,item) {
                $("input[value='"+item+"']").prop("checked",false)
            })
        }
    }).on("loaded.jstree", function (event, data) {
        //initial tree data
        setTimeout(function () {
            $("#div_id_permissions_tree >.col-md-8").jstree(true).uncheck_all();
        },50)
        setTimeout(function () {
            $("#div_id_permissions_tree >.col-md-8 a").removeClass("jstree-clicked")
            $("#div_id_permissions >.col-md-8 .checkbox >label >input:checked").each(function (index, item) {
                $(this).prop("checked",false)
            });
        },100)
    });

    //remove initial data
    $("#div_id_permissions >.col-md-8 .checkbox >label >input:checked").each(function (index, item) {
        $(this).prop("checked",false)
    });
</script>
<script>
  $("[href='{% url 'permissionlist' %}']").parent("li").addClass('active')
</script>
{% endblock %}
